<template>
  <el-dialog class="order_confirm_dialog" v-model="dialogState.orderData.show" :show-close="false" width="450">
    <template #header="{ close, titleId, titleClass }">
      <div class="order_confirm_dialog_header">
        <div class="title">{{ languageJson.message.orderConfirm }}？</div>
        <img @click="close" src="@/assets/home/close.png" style="width: 16px; height: 16px; cursor: pointer" alt="" />
      </div>
    </template>
    <div class="order_confirm_dialog_content">
      <div class="match">
        <div class="name">
          {{ dialogState.orderData.data.minfo.home_name }} vs {{ dialogState.orderData.data.minfo.away_name }}
        </div>
        <div class="handicap">
          {{ dialogState.orderData.data.handicapname
          }}{{ dialogState.orderData.data.place_data[0].pk_odds_key.includes("M") ? "" :
            dialogState.orderData.data.place_data[0].reservation_pk_ratio }}
        </div>
        <div class="type">{{ runtimetext(dialogState.orderData.data.place_data[0]) }}</div>
      </div>
      <div class="price">
        <div class="text1">{{ dialogState.orderData.data.place_data[0].reservation_stake }}</div>
        <div class="text2">{{ dialogState.orderData.data.place_data[0].odd }}</div>
      </div>
    </div>
    <template #footer>
      <div class="order_confirm_dialog_footer">
        <el-button class="cancel_button"
          @click="dialogState.orderData.show = false">{{ languageJson.home.cancel }}</el-button>
        <el-button class="confirm_button" type="primary"
          @click="clickOrder()">{{ languageJson.home.confirmorder }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { http } from '@/utils/http'
import { http as testhttp } from '@/utils/test-http'
import { ElMessage } from 'element-plus'
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const show = defineModel({ type: Boolean })
const { dialogStore, dialogState } = inject('DialogStore')

const runtimeMap = ref([
  {
    value: -1,
    label: languageJson.value.home.continuouslyOrders,
  },
  {
    value: -2,
    label: languageJson.value.home.stopDisk,
  },
  {
    value: -3,
    label: languageJson.value.home.beforeMatch,
  },
  {
    value: -4,
    label: languageJson.value.home.duringMatch,
  },
  {
    value: -5,
    label: `${languageJson.value.home.beforeMatch} + ${languageJson.value.home.duringMatch}`,
  },
  {
    value: 5,
    label: `5s ${languageJson.value.home.stop}`,
  },
  {
    value: 10,
    label: `10s ${languageJson.value.home.stop}`,
  },
  {
    value: 20,
    label: `20s ${languageJson.value.home.stop}`,
  },
  {
    value: 30,
    label: `30s ${languageJson.value.home.stop}`,
  },
  {
    value: 60,
    label: `1min ${languageJson.value.home.stop}`,
  },
  {
    value: 120,
    label: `2min ${languageJson.value.home.stop}`,
  },
  {
    value: 300,
    label: `5min ${languageJson.value.home.stop}`,
  },
  {
    value: 600,
    label: `1min ${languageJson.value.home.stop}`,
  },
  {
    value: 900,
    label: `15min ${languageJson.value.home.stop}`,
  },
  {
    value: 1200,
    label: `20min ${languageJson.value.home.stop}`,
  },
  {
    value: 2400,
    label: `30min ${languageJson.value.home.stop}`,
  },
])

const runtimetext = value => {
  let str = ''
  let list1 = {
    one_user: languageJson.value.home.singleAccount,
    all_user: languageJson.value.home.multipleAccounts,
    count_user: languageJson.value.home.countAccount,
  }
  let list3 = {
    0: languageJson.value.home.successively,
    1: languageJson.value.home.meanwhile,
    2: languageJson.value.home.cycle,
  }
  str += list1[value.order_mode]
  runtimeMap.value.forEach(item => {
    if (item.value == value.runtime) {
      str += ` / ${item.label}`
    }
  })
  str += ` / ${list3[value.place_mode]}`
  return str
}

const gettext = () => {
  let str = ''
  let row = dialogState.orderData.data.place_data[0].pk_odds_key
  let result = row.split(':')
  if (result[0] == 'full') {
    str += languageJson.value.home.full
  } else if (result[0] == 'half') {
    str += languageJson.value.home.half
  }

  if (result[1] == 'M') {
    if (result[3] == '0') {
      str = `${languageJson.value.home.home} ${languageJson.value.home.win}`
    } else if (result[3] == '1') {
      str = `${languageJson.value.home.away} ${languageJson.value.home.win}`
    } else {
      str = languageJson.value.home.draw
    }
  } else if (result[1] == 'R') {
    if (result[3] == '0') {
      str += languageJson.value.home.home
    } else {
      str += languageJson.value.home.away
    }
    str += languageJson.value.home.letballgo
    str += result[2]
  } else if (result[1] == 'OU') {
    if (result[3] == '0') {
      str += languageJson.value.home.over
    } else {
      str += languageJson.value.home.under
    }
    str += result[2]
  }

  return str
}

const clickOrder = () => {
  let body = JSON.parse(JSON.stringify(dialogState.orderData.data))
  delete body.handicapname
  localStorage.setItem('orderData', JSON.stringify(body.place_data[0]));
  testhttp.post('/order/creat_place_order', [body]).then(res => {
    let langMsg = localStorage.getItem(`sp_language`) == 'zh' ? res.msg_lang.text_zh : res.msg_lang.text_en
    ElMessage.success(langMsg || res.msg || languageJson.value.message.checkoutsuccess)
    dialogState.orderData.show = false
  })
}
</script>

<style lang="scss" scoped>
.order_confirm_dialog_header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  background: url('@/assets/home/bg-s.png');
  background-size: cover;
  align-items: center;
  padding: 0 12px;

  .title {
    font-family: AlibabaPuHuiTi_2_85_;
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
}

.order_confirm_dialog_content {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .match {
    display: flex;
    flex-direction: column;
    align-items: center;

    .name {
      font-family: AlibabaPuHuiTi_2_65_;
      font-size: 12px;
      color: #999;
      margin-bottom: 4px;
    }

    .handicap {
      font-family: AlibabaPuHuiTi_2_85_;
      font-size: 14px;
      font-weight: bold;
      color: #000;
      margin-bottom: 4px;
    }

    .type {
      font-family: AlibabaPuHuiTi_2_65_;
      font-size: 12px;
      color: #ff5f58;
    }
  }

  .price {
    margin-top: 16px;
    width: 300px;
    height: 56px;
    background: rgba(254, 172, 46, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .text1 {
      font-size: 18px;
      font-weight: bold;
      color: #000;
    }

    .text2 {
      font-size: 12px;
      font-weight: bold;
      color: #666;
    }
  }
}

.order_confirm_dialog_footer {
  display: flex;
  justify-content: center;
  padding: 24px 0;

  .cancel_button:hover,
  .cancel_button {
    width: 120px;
    height: 32px;
    background-color: #f3f5fd;
    border-color: #f3f5fd;
    font-family: AlibabaPuHuiTi_2_65_;
    font-size: 14px;
    color: #000;
  }

  .confirm_button {
    width: 120px;
    height: 32px;
    background-color: #3711d8;
    border-color: #3711d8;
    font-family: AlibabaPuHuiTi_2_65_;
    font-size: 14px;
    color: #fff;
  }
}
</style>

<style>
.order_confirm_dialog {
  border-radius: 0;
  padding: 0;
  cursor: pointer;
}

.order_confirm_dialog .el-dialog__footer,
.order_confirm_dialog .el-dialog__header {
  padding: 0;
}
</style>